<template>
	<view class="info_detail">
		<view class="info_item">
			<view class="basic_main">
				<view>客户名称</view>
				<view>{{info.customer.name}}</view>
			</view>
			<view class="basic_main">
				<view>客户签约人</view>
				<view>{{info.contacts.name}}</view>
			</view>
			<view class="basic_main">
				<view>公司签约人</view>
				<view>{{info.order_staff.name}}</view>
			</view>
			<form-item v-for="(item,index) in listForm" :key="index" :objInfo="item" :isEdit="false"></form-item>
		</view>
		<view class="info_item">
			<view class="basic_main">
				<view>审批流程</view>
			</view>
			<view class="operation_record" v-if="payment_approval.length != 0">
				<view class="record_item" v-for="(item,index) in payment_approval" :key="index">
					<image :src="item.check_staff.img ? item.check_staff.img : BASE_IMG_URL+'headImg.png'"  mode="scaleToFill"></image>
					<view class="record_info">
						<view class="info_top">
							<view>{{item.check_staff.name}}</view>
							<view class="record_time">
								{{item.check_time ? item.check_time : ''}}
							</view>
						</view>
						<view v-if="item.status == 0">待审核</view>
						<view v-if="item.status == 1">审核通过</view>
						<view v-if="item.status == 2">审核拒绝</view>
						<view v-if="item.status == 3">撤销审批</view>
						<view class="shenhetext" v-if="item.status == 1 || item.status == 2" style="margin-top:10rpx">审核意见：{{item.content}}</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { netPaymentApproval } from '@/api/kehu.js'
	import { netSetForm } from '@/api/index.js'
	import formItem from '@/components/form/formitem.vue'
	import { BASE_IMG_URL } from '@/util/api.js'
	export default {
		props:{
			info:{
				type:Object,
				default:{}
			}
		},
		components:{
			formItem
		},
		data() {
			return {
				payment_approval:[],   //审批流程
				listForm:[],
				showSearch: false,
				BASE_IMG_URL :BASE_IMG_URL
			}
		},
		created() {
			//获取  审批 流程
			this.getApprovalList()
			//获取 form
			this.getForm()
		},
		methods: {
			getForm() {
				netSetForm({type:'contract'}).then(res=>{
					res = res.data.data
					res.forEach(ele=>{
						ele.value = this.info[ele.id]
					})
					this.listForm = res
				})
			},
			getApprovalList() {
				let params = {
					relation_type: 'contract',
					relation_id: this.info.id
				}
				netPaymentApproval(params).then(res=>{
					this.payment_approval = res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	.warpbox {
		width: 750rpx;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
		background: rgba(0, 0, 0, 0.7);
		.scrollbox{
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			background: #fff;
			height:377rpx;
			border-radius:30rpx 30rpx 0 0 ;
			.img{
				position: absolute;
				top: 60rpx;
				right: 64rpx;
			}
			image{
				width: 25rpx;
				height: 25rpx;
			}
			.head{
				text-align: center;
				font-size: 35rpx;
				color: #999;
				margin-top: 65rpx;
			}
			.f_foot{
				margin-top: 100rpx;
				display: flex;
				justify-content: space-around;
				.f-box{
					border: 1px solid #999;
					color: #333;
					padding: 5rpx 15rpx;
					border-radius: 10rpx;
				}
			}
		}
		.screen_content {
			width: 702rpx;
			z-index: 2;
			border-top: 1rpx solid #CCCCCC;
			background-color: #fff;
			padding: 24rpx;
			}
		}
.info_detail {
	margin-bottom: 100rpx;
	.basic_head {
		display: flex;
		padding: 30rpx 24rpx 30rpx;
		:last-child {
			font-weight: 700;
			margin-left: 8rpx;
		}
	}
	.basic_main {
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		background-color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1rpx solid #EAEAEA;
		:first-child {
			color: #999;
		}
		>view{
			font-size: 32rpx;
		}
	}
}
.operation_record {
		background:#fff;
		padding: 20rpx 30rpx;
		.record_item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			padding-bottom:20rpx;
			border-bottom:1rpx solid #EAEAEA;
			margin-bottom:20rpx;
			&:last-child{
				border-bottom:none;
			}
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}
			.record_info {
				flex: 1;
				margin-left: 25rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				.info_top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom:10rpx;
				}
				.shenhetext{
					font-size:26rpx;
					color:#666;
					line-height: 34rpx;
				}
			}
			.record_line {
				position: absolute;
				top: -102rpx;
				left: -26rpx;
				height: 105rpx;
				border-left: 4rpx dotted #dedede;
			}
		}
	}
	.foot{
		background: #fff;
		height: 200rpx;
		.f_left{
			margin: 26rpx 30rpx;
			width: 80rpx;
			height: 80rpx;
			float: left;
			border-radius: 50%;
			background: red;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.f_right{
			font-size: 30rpx;
			color: #999;
			float: left;
			width:570rpx ;
			margin-top: 40rpx;
			.f_r_top{
				p{margin-bottom: 10rpx;
					span{
						float: right;
					}
				}
			}
			.f_r_center{
				margin-bottom: 10rpx;
			}
			.f_r_foot{
				
			}
		}
	}
	.footer{
		height: 100rpx;
		margin-top: 20rpx;
		background: #fff;
		// text-align: center;
		line-height: 100rpx;
		image{
			width: 48rpx;
			height: 48rpx;
			margin-top: 25rpx;
			margin-right:25rpx;
			margin-left: 290rpx;
			float: left;
		}
	}
</style>
